import React from "react";
import { View } from "@tarojs/components";
import RiskQueryDetaiil from './riskDetailItem';
import Taro, { useRouter } from '@tarojs/taro'

const mockData = [
  {
    id: "1",
    title:"生产加工环境条件",
    company: "市场监督局",
    measure:'立即维修，考虑增加额外的固定装置，如螺丝、螺栓或夹具;定期检查，做维修记录，经常掉落可以考虑更换新的设施',
    content:'通风、防尘、排水、照明、温控等设备设施与防鼠防朝、防虫害装置是否正常运行'
  },
  {
    id: "2",
    title:"生产加工环境条件",
    company: "市场监督局",
    measure:'立即维修，考虑增加额外的固定装置，如螺丝、螺栓或夹具;定期检查，做维修记录，经常掉落可以考虑更换新的设施',
    content:'防鼠、防蝇、防虫害装置是否正常使用并有相应检查记录，生产场所是否有虫害迹象。'
  },
]

const riskDetail: React.FC = () => {
  const router = useRouter();
  const { id } = router.params;

  return (
    <View className='bg-slate-50'>
      <View className="w-full p-3 bg-white shadow-sm">
      <View className="w-full mb-2 text-xs text-red-500">
        频发 已有多家企业发现
      </View>
      <View className="flex flex-row items-center w-full gap-2 flex-nowrap">
        <View className="flex flex-row items-center justify-center px-2 text-2xl text-red-400 rounded-md bg-red-50 flex-nowrap">
          A
        </View>
        <View className="flex-1 w-1">
          <View className="w-full mb-1 truncate">"检验检查酸价（以脂肪计）（KOH）检验的..."</View>
          <View className="flex flex-row items-center justify-between flex-nowrap">
            <View className="text-xs text-gray-500">
              风险来源: 市场监督局
            </View>
            <View className="text-xs text-gray-500">
              食品大类：无
            </View>
          </View>
        </View>
      </View>
      </View>
      <View className="w-full px-3">
        <View className="py-3 text-lg font-bold">
          检查项目
        </View>
        <View>
          {mockData.map((item: any,index:any) => (
            <RiskQueryDetaiil key={item.id} item={item} index={index} />
          ))}
        </View>   
       
      </View>
    </View>
  );
};

export default riskDetail;
